
<div class="wrap">

    <div id="chat_room-mini-header-test">
        <a href="index.html">
            <div id="chat_room-header-logo"></div>
        </a>
            

            <div id="chat_room-mini-header-sort-by"><a href="#"><span id="privateButton" onclick="alert('Coming soon!');">Privates</span></a> | <a href="#"><span id="latestButton" style="color:#D34836" onclick="swapView('chat_room-test');">Latest</span></a> |<a href="#"> <span id="browseButton" onclick="alert('Coming soon!');">Browse</span></a> | <a href="#"><span id="mostUpVotedButton" onclick="swapView('mostUpVoted');">Top Rated</span></a></div>
        
            <div id="arrow" class="chat_room-header-arrow-down" onclick="toggleTopics();"></div>
            
            <div id="chat_room-large-header-test">
                <div id="chat_room-large-header-your-topics" ondrop="drop(event)"></div>

                <div id="chat_room-large-header-in-traffic" ondrop="drop(event)" ondragover="allowDrop(event)">
                    <img style="position: relative; left: -50%;" src="https://cdn3.iconfinder.com/data/icons/linecons-free-vector-icons-pack/32/trash-64.png">
                </div>

            </div>
        
    </div>
    

	<div id="chat_room-container-test">  
            <div id="browse" style="display:none">
                [Coming soon!]
                <div id="browse-container" style="display:none">
                    
                    <!-- PARENT -->
                        <div class="browse-topic-wrap">
                            <div class="browse-parent-label">
                                <h2>GAMING</h2>
                            </div>
                        </div>
                    <!-- END PARENT -->
                    <!-- CHILD -->
                        <div class="browse-topic-wrap">
                            <div class="browse-child-label">
                                <h4>LeagueofLegends</h4>
                            </div>
                        </div>
                    <!-- END CHILD -->
                    <!-- CHILDs Child -->
                        <div class="browse-topic-wrap">
                            <div class="browse-childs-child-label">
                                <h4>LookingForLOLTeam</h4>
                            </div>
                        </div>
                    <!-- END CHILDs CHILD -->
                    <!-- CHILD -->
                        <div class="browse-topic-wrap">
                            <div class="browse-child-label">
                                <h4>WorldOfWarcraft</h4>
                            </div>
                        </div>
                    <!-- END CHILD -->
                    <!-- CHILD -->
                        <div class="browse-topic-wrap">
                            <div class="browse-child-label">
                                <h4>TeamFortress2</h4>
                            </div>
                        </div>
                    <!-- END CHILD -->
                    <!-- PARENT -->
                        <div class="browse-topic-wrap">
                            <div class="browse-parent-label">
                                <h2>Politics</h2>
                            </div>
                        </div>
                    <!-- END PARENT -->
                    <!-- PARENT -->
                        <div class="browse-topic-wrap">
                            <div class="browse-parent-label">
                                <h2>Sports</h2>
                            </div>
                        </div>
                    <!-- END PARENT -->
                    
                </div>
            </div>
            <div id="mostUpVoted" style="display:none">
                <span class="10" style="display: block"><div class="message-container"><div class="message-author"><a href="profile.html?name=SERVER" target="_blank">SERVER</a></div><div class="message-image" style="background-image:url(bilder/server1.png);"><div class="message-account"></div></div><div class="message-overlay">I watch you when you sleep.</div>Loading most upvoted...</div></span>
            </div>
            <div id="private" style="display:none"><br><br><br>[Not yet implemented]</div>
            <div id="chat_room-test">
                <div id="chat_room-layer"></div>
                <span class="10" style="display: block"><div class="message-container"><div class="message-author"><a href="profile.html?name=SERVER" target="_blank">SERVER</a></div><div class="message-image" style="background-image:url(bilder/server1.png);"><div class="message-account"></div></div><div class="message-overlay">I watch you when you sleep.</div>Loading chat...</div></span>
            </div>
        </div>
	
        <form action='' id='chat_form'>
            <div id="reply-form-container">
                <textarea id="message" required ></textarea>
                <div id="chat_room-choose-color">
                    
                </div>
                <input id="reply-form-button" type="submit" value="">
                <!-- Smiley BOX -->
                <div id="chat_room-show-smiley" onclick="toggleSmileys();"></div>
                
                    <div id="smileyBox" style="display:none">
                        <div id="commandBox-header">
                            <h2 id="black">Smileys</h2>
                        </div>
                      
             
                       <div class="tinyExit" onclick="toggleSmileys();"></div>
       
                        <table id="smilyBoxTable">
                            <tr style="background-color: #222; height: 50px;">
                              <th>Smiley</th>
                              <th>Command</th>
                            </tr>
                            <tr>
                                <td><img src="bilder/apeface2.png"></td>
                                <td>ApeFace</td>
                            </tr>
                            <tr>
                              <td><img src="bilder/Cbear.png"></td>
                                <td>ConfessionBear</td>
                            </tr>
                            <tr>
                              <td><img src="bilder/AwkwardSeal.png"></td>
                                <td>AwkwardSeal</td>
                            </tr>
                            <tr>
                              <td><img src="bilder/hugeQsmall.png"></td>
                                <td>HugeQ</td>
                            </tr>
                             <tr>
                                <td><img src="bilder/Cristobal2.png"></td>
                                <td>Crappa</td>
                            </tr>
                            <tr>
                                <td><img src="bilder/ygge.png"></td>
                                <td>Ygge</td>
                            </tr>
                            
                            <tr>
                                <td><img src="bilder/chloesmiley2.png"></td>
                                <td>Chloe</td>
                            </tr>
                            <tr>
                                <td><img src="bilder/heart.png"></td>
                                <td><3</td>
                            </tr>
                            <tr>
                                <td><img src="bilder/grumpy.png"></td>
                                <td>></td>
                            </tr>
                            <tr>
                                <td><img src="bilder/littleegypt.png"></td>
                                <td>Egymto</td>
                            </tr>
                            <tr>
                                <td><img src="bilder/littleegypt2.png"></td>
                                <td>Egypt</td>
                            </tr>
                            <tr>
                                <td><img src="bilder/littleegyptloop2.gif"></td>
                                <td>Loop</td>
                            </tr>
                            <tr>
                                <td><img src="bilder/robot.png"></td>
                                <td>:\</td>
                            </tr>
                            <tr>
                                <td><img src="bilder/locomotive.png"></td>
                                <td>Cho</td>
                            </tr>
                            <tr>
                                <td><img src="bilder/locomotive_1.gif"></td>
                                <td>Train</td>
                            </tr>
                           
                            <tr>
                                <td><img src="bilder/carriage.png"></td>
                                <td>Carriage</td>
                            </tr>
                            
                            <tr>
                                <td><img src="bilder/svamp2.png"></td>
                                <td>Svamp</td>
                            </tr>
                            <tr>
                                <td><img src="bilder/yoda.png"></td>
                                <td>Yoda</td>
                            </tr>
                            <tr>
                                <td><img src="bilder/owl.png"></td>
                                <td>Uggla</td>
                            </tr>
                            <tr>
                                <td><img src="bilder/reinfeldt.png"></td>
                                <td>Rein</td>
                            </tr>
                            <tr>
                                <td><img src="bilder/gudrun.png"></td>
                                <td>Gudrun</td>
                            </tr>
                            <tr>
                                <td><img src="bilder/bjorklund.png"></td>
                                <td>Bjork</td>
                            </tr>
                            <tr>
                                <td><img src="bilder/akesson.png"></td>
                                <td>Ake</td>
                            </tr>
                            
                            
                            

                        </table>
                    </div>
                <!-- Command-box -->
                <div id="chat_room-show-commands" onclick="showCommands();"></div>
                    <div id="commandBox" style="display:none">
                        <div id="commandBox-header">
                            <h2 id="black">Commands</h2>
                        </div>
             
                       <div class="tinyExit" onclick="hideCommands();"></div>
       

                        <table>
                            <tr style="background-color: #222; height: 50px;">
                              <th>Command</th>
                              <th>Description</th>
                            </tr>
                            <tr>
                              <td>!join "topic", !leave "topic"</td>
                              <td>Add a new topic to your discussion feed or leave an existing topic. </td>
                            </tr>
                            <tr>
                              <td>!favourite "topic", !unfavourite "topic"</td>
                              <td>Save a topic to your favourites or delete a saved topic. (found in the left menu)</td>
                            </tr>
                            
                            <tr>
                              <td>@"user" your private message</td>
                              <td>Send a private message to an other user. </td>
                            </tr>

                        </table>
                    </div>
     

                <!--<div id="reply-form-image-upload"></div>-->
            </div>	
        </form>
		
	</div>
	
<script type="text/javascript" src="js/chat.js"></script>